<script setup lang="ts">
import {
  ApplicationUseType,
  getCurrentUserNotice,
  NoticeQueryPrams,
  NoticeQueryResultItem,
} from "@/api";
import { ArrowRight } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, unref, watch } from "vue";
import Noticedetail from "./noticedetail.vue";
const props = defineProps<{
  // 所属平台
  sysType?: ApplicationUseType;
  // 商户/代理商id
  relevancyId?: string;
  // 通知1:公告2
  type: 2 | 1;
  // 已读1:未读0
  readStatus?: 0 | 1;
  // 总的条数,仅用于单向通知父组件,父组件传参至子组件不会有相应反应
  totalRows?: number;
  height?: string | number
}>();
const emits = defineEmits(["totalRow", "update:totalRows"]);
const lists = ref<NoticeQueryResultItem[]>([]);
const pageListQueryParam = reactive<NoticeQueryPrams>({
  pageNo: 1,
  pageSize: 20,
}),
  NoticedetailComponent = ref<InstanceType<typeof Noticedetail>>(),
  loading = ref(false),
  totalRows = ref(0),
  finished = computed(() => unref(lists).length >= unref(totalRows));
//有关查看详情有关操作代码块
let tempindex: number;
function showDetail(params: NoticeQueryResultItem, index: number) {
  unref(NoticedetailComponent)?.show(params.id);
  tempindex = index;
}

function load() {
  if (loading.value) return;
  loading.value = true;
  const { totalRows: other, height, ...otherInfo } = props
  Object.assign(pageListQueryParam, otherInfo);
  getCurrentUserNotice(pageListQueryParam)
    .then((data) => {
      data.rows.forEach((i) => {
        lists.value.push(i);
      });
      totalRows.value = data.totalRows;
    })
    .catch(() => {
      // 用于触发停止拉取
      totalRows.value = lists.value.length;
    })
    .finally(() => {
      loading.value = false;
      emits("update:totalRows", unref(totalRows));
    });
}

function handleDetailClose() {
  totalRows.value -= 1;
  emits("update:totalRows", unref(totalRows));
  lists.value.splice(tempindex, 1);
}
/**
 * 清空组件状态
 *@param boo 是否通知父组件
 */
function clearnStatus(boo?: boolean) {
  loading.value = false;
  totalRows.value = 0;
  pageListQueryParam.pageNo = 1;
  lists.value = [];
  load();
  if (boo) {
    emits("update:totalRows", unref(totalRows));
  }
}
watch(props, () => {
  clearnStatus();
});
</script>
<template>
  <div class="notice-list-block">
    <Teleport to="body">
      <Noticedetail ref="NoticedetailComponent" @close="handleDetailClose" />
    </Teleport>
    <ElEmpty v-if="lists.length <= 0 && finished" description="暂无公告" />
    <el-scrollbar v-else :height="height" class="loading-list-container" v-infinite-scroll="load"
      :infinite-scroll-disabled="finished || loading">
      <div v-for="(item, index) of lists">
        <ElLink class="notice-item" @click="showDetail(item, index)">
          <span class="notice-title">{{ (index + 1) }} : {{ item.title }}</span>
          <span class="notice-publick-time">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </span>
        </ElLink>
      </div>
    </el-scrollbar>
  </div>
</template>
<style lang="less">
.notice-list-block {
  min-height: 100px;
}

.loading-list-container {
  box-sizing: border-box;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.notice-item {
  .el-link__inner {
    width: 100%;
    justify-content: space-between;
  }
}
</style>
